<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>财务布局管理</title>
    <style>
    </style>
</head>
<body>

<div v-loading="loading" id="organizationManage" class="organizationManage mainPadding"  style="display: none;">  

    <el-breadcrumb separator="/" class="elBreadcrumb marginB20" >
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>财务布局管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
        <el-col :xs="12" :sm="16" :md="16" :lg="18" :xl="12">
            <el-button type="primary" @click="addbutton"><i class="el-icon-plus"></i>添加</el-button>
            <el-button type="success" @click="updateButton"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button type="danger" @click="deleButton"><i class="el-icon-delete"></i>删除</el-button>
        </el-col>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
          	<el-form :inline="true">
              <el-form-item label="商务小组:" label-width="60px">
        				<el-select filterable v-model="busGroupId" placeholder="商务小组" clearable>
        			    <el-option
        			      v-for="item in swList"
        			      :key="item.id"
        			      :label="item.name"
        			      :value="item.id">
        			    </el-option>
        				</el-select>
              </el-form-item>
              <el-form-item label="财务人员姓名:" label-width="110px">
        				<el-select filterable v-model="financeUsers" placeholder="财务人员姓名" clearable>
        			    <el-option
        			      v-for="item in cwList"
        			      :key="item.id"
                            :label="item.name"
                            :value="item.id">
        			    </el-option>
        				</el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button icon="el-icon-search" type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
              </el-form-item>
            </el-form>
        </div>
        <el-row>
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                empty-text="无数据"
                style="width: 100%"
                border
                :data="dataTable"  @selection-change="handleSelectionChange">
                 <el-table-column align="center" prop="id" type="selection" width="55"></el-table-column>
                 <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column>  -->
                <el-table-column align="center" prop="busGroupName" label="商务小组"></el-table-column>
                <el-table-column align="center" prop="financeUsers" label="负责财务人员姓名"></el-table-column>
                <el-table-column align="center" prop="signProjectNames" label="签约项目"></el-table-column>
                <el-table-column align="center" prop="signProvinces" label="签约省份"></el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间" :formatter="dateFormatTime"></el-table-column>
            </el-table>
             <table-pagination :pager="pager"  @change="inviteAreaListPage"></table-pagination>
        </el-row>
    </div>
    <!-- dialog -->
    <el-dialog :title="showTitle" :visible.sync="dialogFormVisible" width="540px" @close="closeAddCustomFieldDialog">
        <!-- <el-form :model="form" ref="form" :rules="rules" class="width500"> -->
        <el-form :model="form" ref="form" :rules="rules" >
            <el-form-item label="商务小组：" :label-width="formLabelWidth" prop="busGroupId">
                <el-select filterable v-model="form.busGroupId"   placeholder="选择电商务小组" @change="userChangeSelect"  style="width: 290px;">
                    <el-option
                        v-for="item in swList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务线：" :label-width="formLabelWidth" prop="businessLine" v-if="0">
                <el-input v-model="form.businessLine" placeholder="业务线"></el-input>
            </el-form-item>
            <el-form-item label="签约项目：" :label-width="formLabelWidth" prop="signProjects">
                <el-select   filterable v-model="form.signProjects" multiple  placeholder="选择签约项目" style="width: 290px;">
                    <el-option
                            v-for="item in projectList"
                            :key="item.id"
                            :label="item.projectName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="签约省份：" :label-width="formLabelWidth" prop="signProvinces">
                <el-select   filterable v-model="form.signProvinces" multiple  placeholder="选择签约省份" style="width: 290px;">
                    <el-option
                            v-for="item in provinceList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="负责财务：" :label-width="formLabelWidth" prop="financeUsers">
                <el-select multiple-limit=20  filterable v-model="form.financeUsers" multiple  placeholder="选择财务" style="width: 290px;">
                    <el-option
                        v-for="item in cwList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

        <div slot="footer" style="text-align: center" class="dialog-footer">
            <el-button type="primary" :disabled="btnDisabled" @click="submitForm('form')">提交</el-button>
            <el-button @click="dialogFormVisible= false">取消</el-button>
        </div>
    </el-dialog>


</div>
<input id="addOrUpdate" type="hidden" >
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">

    var swList=[[${swList}]];
	var cwList = [[${userList}]];
	//项目列表
	var projectList = [[${projectList}]];
	//省份列表
	var provinceList = [[${provinceList}]];
   var orgVM =  new Vue({
        el: '#organizationManage',
        data: {
            btnDisabled: false,
        	showTitle:"",
            businessLine:"",
        	dialogBatchVisible:false,
        	confirmBtnDisabled:false,
        	formLabelWidth: '130px',
        	dialogFormVisible: false,
        	busGroupId:"",
        	addOrModifyDialogTitle:"",
        	dialogFormVisible:false,
        	dataTable:[],
        	multipleSelection: [],
        	swList:swList,
        	cwList:cwList,
            projectList:projectList,
            provinceList:provinceList,
        	financeUsers:"",
        	form:{
        		busGroupId: '',
        		financeUsers: [],
            businessLine:''
        	},
        
            pager:{
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            loading:false,
            rules: {
            	busGroupId: [
                    { required: true, message: '请选择商务小组', trigger: 'change' }
                ],
                financeUsers: [
                    { required: true, message: '请选择财务', trigger: 'change' }
                ],
               
            }
             
        },
        methods: {
        	search(){
        		this.pager.currentPage = 1;
        		this.inviteAreaListPage();
        	},
            //根据商务小组查询
            userChangeSelect(selVal) {
                orgVM.cwList = cwList;
                if (null != selVal) {
                  var param = {};
                  param.id = selVal;
                  //根据商务小组id获取业务线
                  axios.post('/organization/organization/queryOrgById', param).then(function (response) {
                      if (null != response || response.data != null || response.data.code == '0') {
                          var param = {};
                          param.roleList = ["QDSJCW", "SJHZCW", "CYCW"];
                          param.businessLine = response.data.data.businessLine;
                          orgVM.form.businessLine = response.data.data.businessLine;
                          orgVM.form.financeUsers =[];
                          console.log(response.data.data.businessLine);
                          //根据业务线获取财务集合
                          axios.post('/user/userManager/getUserInfoListByParam', param).then(function (response) {
                              // console.log(response.data.data);
                              if (null != response || response.data != null || response.data.code == '0') {
                                  orgVM.cwList = response.data.data;
                              }
                          });
                      }
                  });
                }
            },
        	inviteAreaListPage(){//查询按钮
            	  var param = {}; 
            	  var pageSize = this.pager.pageSize;
                  var pageNum = this.pager.currentPage;
                  param.pageNum = pageNum;
                  param.pageSize = pageSize;
                  param.financeUsers=this.financeUsers;
                  param.busGroupId=this.busGroupId;
                 
                  axios.post('/financing/financelayout/getFinanceLayoutList',param).then(function (response) {
                  	//   console.log(response);
                      if(null===response||response.data==null||response.data.code!='0'){
                    	  orgVM.$message({message: response.data.msg, type: 'warning'});
	                  	  return ;
                     }else{
                    	 orgVM.dataTable =response.data.data.data; 
                    	 orgVM.pager.currentPage= response.data.data.currentPage;
                    	 orgVM.pager.total= response.data.data.total;
                     } 
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  });  
                  
              } ,
              updateButton(){
            	  this.showTitle="修改布局"
            	  if (this.$refs['form']!=undefined) {
                 		this.$refs['form'].resetFields();
                 	  }
            	  $("#addOrUpdate").val(2);
            	  //修改菜单数据	
              	var rows = this.multipleSelection;
                  if(rows.length!=1){
                      this.$message({
                         message: '请选择一条数据进行修改',
                         type: 'warning'
                       });
                      return;
                  }
                  this.dialogFormVisible = true;
                  var param ={};
                  var str = "";
                  for ( var i = 0; i <rows.length; i++){
                	  str = rows[i].id
                  }
                  param.id = str;
                  axios.post('/financing/financelayout/findFinanceLayoutById',param).then(function (response) {
                  	//   console.log(response);
                      if(null !==response && response.data !=null && response.data.code=='0'){
                    	  var financeLayout = response.data.data;
                          orgVM.form.busGroupId = financeLayout.busGroupId;
                    	  var financeUsers = financeLayout.financeUsers;
                    	  var valueMultiple=[];
                    	  var obj = financeUsers.split(',');
                    	    if(null!=financeUsers && obj.length>0) {
                         	   for(var i=0;i<obj.length;i++){
                         	       valueMultiple.push(obj[i]+"");
                         	     }
                         	   }
                    	    orgVM.form.financeUsers=valueMultiple;
                          //签约项目
                          var signProjects = financeLayout.signProjects;
                          var signProjectsMultiple=[];
                          var signProjectsObj = signProjects.split(',');

                          if (null != signProjects && signProjectsObj.length > 0) {
                              for (var i = 0; i < signProjectsObj.length; i++) {
                                  signProjectsMultiple.push(signProjectsObj[i] + "");
                              }
                              if (signProjectsMultiple != null && signProjectsMultiple != "") {
                                  orgVM.form.signProjects = signProjectsMultiple;
                              }

                          } else {
                              orgVM.form.signProjects = projectList;
                          }
                          //签约省份
                          var signProvinces = financeLayout.signProvinces;
                          var signProvincesMultiple = [];
                          var signProvincesObj = signProvinces.split(',');
                          if (null != signProvinces && signProvincesObj.length > 0) {
                              for (var i = 0; i < signProvincesObj.length; i++) {
                                  signProvincesMultiple.push(signProvincesObj[i] + "");
                              }
                              if (signProvincesMultiple != null && signProvincesMultiple != "") {
                                  orgVM.form.signProvinces = signProvincesMultiple;
                              }
                          }

                     }else{
                    	 orgVM.$message({message: response.data.msg, type: 'warning'});
	                  	  	return ;
                     } 
                  }).catch(function (error) {
                      console.log(error);
                  })
                  .then(function () {
                    // always executed
                  });  
              },
              deleButton(){
            	  var rows = this.multipleSelection;
                  if(rows.length <1){
                      this.$message({
                         message: '请选择删除数据',
                         type: 'warning'
                       });
                      return;
                  }
                  var moduleName="";
    	           if(null!=rows){
    	 		       for ( var i = 0; i <rows.length; i++){
    	 		    	  moduleName+="【"+rows[i].busGroupName+"】";
    	 		        }
    	           }
    	           this.$confirm("确定要删除"+moduleName+"财务布局?", '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       type: 'warning'
                   }).then(() => {
                      	// 查询 table 需要数据
                       var param = {};
                       var deleInfo=this.multipleSelection;
     	        	    var ids="";
     		            if(null!=deleInfo){
     		             for ( var i = 0; i <deleInfo.length; i++){
     		            	if("" == ids){
     		            		ids = deleInfo[i].id
     		            	}else{
     		            		ids = ids+","+deleInfo[i].id
     		            	}
     		             }
     		             var param={};
     		             param.ids=ids;
    	                 axios.post('/financing/financelayout/deleFinanceLayout',param).then(function (response) {
    	                  	//   console.log(response);
    	                      if(null !==response && response.data !=null && response.data.code=='0'){
    	                    	  window.location.href="/financing/financelayout/financeLayoutPage"; 
    	                     }else{
    	                    	 orgVM.$message({message: response.data.msg, type: 'warning'});
     	                  	  	return ;
    	                     } 
    	                  }).catch(function (error) {
                              console.log(error);
                          })
                          .then(function () {
                            // always executed
                          });  
     	              
                     }
                   }).catch(() => {
                       this.$message({
                           type: 'info',
                           message: '已取消删除'
                       });          
                   });
    	           
    	     
              },
              
              showExport(){//点击弹出新增dialog
              	this.dialogFormVisible = true;
              	this.addOrModifyDialogTitle="添加菜单页面";
              },
              closeAddCustomFieldDialog(){//关闭添加自定义字段dialog
            	  if (this.$refs['customMenuForm']!=undefined) {
               		this.$refs['customMenuForm'].resetFields();
               	  }
              },
              cancelForm(formName) {
                  this.$refs[formName].resetFields();
              	this.dialogFormVisible = false;
              },
              handleSelectionChange(val) {
                  this.multipleSelection = val;
              },
              
            //时间格式化
              dateFormat(row, column){
            	  var date = row[column.property]; 
            	     if (date == undefined || date ==null || date =="") { 
            	       return ""; 
            	     } 
            	     return moment(new Date(date)).format("YYYY-MM-DD"); 
            	} ,
                //时间格式化
                dateFormatTime(row, column){
              	  var date = row[column.property]; 
              	     if (date == undefined) { 
              	       return ""; 
              	     } 
              	     return moment(new Date(date)).format("YYYY-MM-DD HH:mm:ss"); 
              	} ,
             submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                    //   debugger;
                        if (valid) {
                          var formData = this.form;
                          var param={};
                          var strs ="";
                            for (var i = 0; i < formData.financeUsers.length; i++) {
                                var user = formData.financeUsers[i];
                                if (strs != "") {
                                    strs = strs + "," + user;
                                } else {
                                    strs = user;
                                }
                            }
                            param.financeUsers = strs;
                        var signProjectsStrs ="";
                        for ( var i = 0; i <formData.signProjects.length; i++){
                            if(signProjectsStrs !=""){
                                signProjectsStrs = signProjectsStrs+","+formData.signProjects[i];
                            }else{
                                signProjectsStrs = formData.signProjects[i];
                            }
                        }
                        param.signProjects = signProjectsStrs;
                            var signProvincesStrs ="";
                            for ( var i = 0; i <formData.signProvinces.length; i++){
                                if(signProvincesStrs !=""){
                                    signProvincesStrs = signProvincesStrs+","+formData.signProvinces[i];
                                }else{
                                    signProvincesStrs = formData.signProvinces[i];
                                }
                            }
                            param.signProvinces = signProvincesStrs;
                          param.busGroupId = formData.busGroupId;
                          param.businessLine = formData.businessLine;
                          var str = "";


                          var url = "/financing/financelayout/addFinanceLayout";
                          if($("#addOrUpdate").val() ==2){
                        	  var rows = this.multipleSelection;
                              for ( var i = 0; i <rows.length; i++){
                            	  str = rows[i].id
                              }
                              param.id = str;
                        	  url = "/financing/financelayout/updateFinanceLayout"
                          }
                          this.btnDisabled = true;
                       	  axios.post(url,param).then(function (response) {
       	                  	//   console.log(response);
       	                      if(null !==response && response.data !=null && response.data.code=='0'){
                                  orgVM.btnDisabled = false; 
       	                    	  window.location.href="/financing/financelayout/financeLayoutPage"; 
       	                     }else{
                                   orgVM.$message({message: response.data.msg, type: 'warning'});
                                   orgVM.btnDisabled = false; 
        	                  	  	return ;
       	                     } 
       	                  }).catch(function (error) {
                                 console.log(error);
                                 orgVM.btnDisabled = false; 
                             })
                             .then(function () {
                               // always executed
                             });  
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                closeUploadFileDialog(){//关闭上传文件 dialog
              	  this.$refs.upload.clearFiles();
                },
                handleChange(files,fileList){//只允许选择一个文件
                    this.fileList = fileList.slice(-1);
              },
             
                addbutton(){
                	this.showTitle="添加布局"
                	$("#addOrUpdate").val(1);
                	this.dialogFormVisible=true;
                	if (this.$refs['form']!=undefined) {
                		this.form.busGroupId = "";
                    	this.form.financeUsers = "";
                   		this.$refs['form'].resetFields();
                   	  }
                }
        },
        created(){
          // 取页数存储
          var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
          if(localVal){this.pager.pageSize = localVal;}

        	this.inviteAreaListPage();
        	document.getElementById('organizationManage').style.display = 'block';
        	
        	
        },//created方法 结束
        mounted(){
            document.getElementById('organizationManage').style.display = 'block';
        }
    })
</script>
</html>